<template>
  <div class="comment-container">
        <div>
            <WriteComment  @pushComment='middleEmit' ></WriteComment>    
        </div>
        <div class="view-comment" >
            <div>
                {{title}}总数({{count }})
            </div>
            <div class="temp-com-list" v-if="tempCommentlist.length > 0 ">
                 <CommentBox v-for="(com,index) in tempCommentlist  " :Key='com._id' :name="com.name"
                      :content="com.content" :imgUrl='com.thumb' :index="num(index)" :date='com.createdAt'
                      :baseUrl="baseUrl"
                    ></CommentBox>
            </div>
            <div class="commet-list">
                    <CommentBox v-for="(com,index) in commentList " :Key='com._id' :name="com.name"
                      :content="com.content" :imgUrl='com.thumb' :index="index + 1" :date='com.createdAt'
                      :baseUrl="baseUrl"
                       ></CommentBox>
            </div>
            <div class="comment-last">
                {{count == 0 ? `${title}为空`: isCount ? '———— 到底了 ————':''}}
            </div>
        </div>
  </div>
 
</template>

<script>
import WriteComment from './writeComment.vue';
import CommentBox from './commentBox.vue';
import {baseUrl} from '../../config.js';
import {ref,onMounted,computed} from 'vue';
import {count as c ,commentListTemp} from '../../compostion/useRef';
export default {
    props:{
        title:{
            type:String,
            default:"评论"
        },
        commentList:{
            type:Array,
            deafault:[]
        },
        count:{
            type:Number,
            default:0
        },
        tempCommentlist:{
            type:Array,
            default:[]
        }
    },
    components:{
        WriteComment,
        CommentBox
    },
    setup(p,cxt){
       let numb = 0;
       const i = ref(0);
       const middleEmit = (e)=>{

           cxt.emit("pushComment",e)
       }
       
      const num = (index)=>{
          
          return numb + index+1;
      }
      const isCount = computed(()=>{

          return p.count == p.commentList.length || p.commentList.length +commentListTemp.value.length == p.count
      })


      onMounted(()=>{
          
         
          setTimeout(() => {
             numb = c.value;
          }, 100);
      })
       return{
           middleEmit,
           baseUrl,
           i,
           num,
           isCount
          
          
       }
    }

}
</script>

<style lang="less" scoped>
.comment-container{
    padding: 10px 20px;
    
   

    
    .view-comment{
        min-height: 200px;
        width: 100%;
        .temp-com-list{
            margin-top: 2px;
           
        }
        .comment-last{
            width: 100%;
            height: 30px;
            text-align: center;
            color: #999;

        }
    }
}
 
</style>